<template>
  <div class="com-container">
    <div class="location-table" ref="location_ref">
<!--      style="width: 80%"-->
      <el-table
        :data="tableData"
        border
        @row-click="rowclick"
        :highlight-current-row="true"
        ref="table_ref"
        :max-height="maxHeight"
        >
        <el-table-column
          prop="year"
          label="日期"
          :width="widthDL">
        </el-table-column>
        <el-table-column
          prop="location_title"
          label="地点"
          :width="widthDL">
        </el-table-column>
        <el-table-column
          prop="description"
          label="地点描述"
        >
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="limit"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import location from '@/api/data/location'

export default {
  props:['figureId'],
  data () {
    return {
      tableData: [],//表格数据
      current: 1,//当前页
      limit: 5,//每页显示数量
      total: 0,//数据总量
      widthDL: 100,//日期和地点的表格宽度
      locationId:'',//地点id
      maxHeight:''
    }
  },
  mounted () {
    this.getData()
    //增加屏幕大小变化监听的事件
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async getData () {
      const res = await location.getPageFigureLocation(this.figureId, this.current, this.limit)
      this.total = res.data.pageLocation.total
      this.tableData = res.data.pageLocation.locationData
    },
    handleCurrentChange (e) {
      // console.log('handleCurrentChange:' + e)
      this.current = e
      this.getData()
    },
    screenAdapter () {
      this.size = (this.$refs.location_ref.offsetWidth / 100) * 3.6
      this.widthDL = this.size * 3
      this.maxHeight = this.$refs.location_ref.offsetHeight / 1.3
    },
    rowclick(res){
      this.locationId = res.id
      this.$emit('getLocationId',this.locationId)
    }
  }
}
</script>
<style scoped>
.location-table {
  text-align: center;
  background-color: #333333;
  border-radius: 20px;
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}

.block {

}
.el-table{
  /*font-size: 10px;*/
}

/*// .location-table为你的上级父元素class名称*/
/*// 由于是只在本页面修改, 所以必须要用 /deep/ 或者 >>> 才能生效  /deep/ 是深度选择器,可自行百度了解更多*/
/*.location-table /deep/  .el-table, .el-table__expanded-cell {*/
/*     background-color: #333333;*/
/*   }*/
/*.location-table /deep/ .el-table tr {*/
/*  background-color: #333333;*/
/*}*/
.location-table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
  background-color: #333333;
  color: white;
}
.location-table /deep/  .el-table__row>td{
  border: 1px solid #242F3E;
  color: white;
}
/* 清除底部横线 */
/*.el-table::before {*/
/*  height: 0px;*/
/*}*/

.el-table /deep/ th, .el-table tr{
  background-color: #333333;
  border: 1px solid #242F3E;
  color: white;
}
.location-table[data-v-5a88f469]{
  background-color: #333333;
}
</style>
